<template>
  <div class="more-list">
    <div class="wrapper">
      <h3>{{ this.$route.params.musicTitle }}</h3>
        <!-- 下拉刷新 ,以组件形式包裹要下拉刷新的地方-->
        <pull-refresh :on-refresh="onRefresh">
        <router-link tag="div" :to="{name:'musicPlay', params: {songId: item.song_id }}" class="info url log" v-for="(item, index) in moreListData" :key="index">
          <div class="poster">
            <img :src="item.pic_big" :alt="item.title">
          </div>
          <div class="text-wrap">
            <div class="music-title">{{ item.album_title }}</div>
            <div class="music-author">{{ item.author }}</div>
          </div>
        </router-link>
        </pull-refresh>
    </div>
  </div>
</template>

<script>
// 下载包依赖 cnpm i --save bue-pull-refresh
// 引入 vue-pull-refresh
import PullRefresh from 'vue-pull-refresh'
import { setTimeout } from 'timers';
export default {
  name: 'moreMusic',
  data() {
    return {
      moreListData: [],
      offset: 0
    }
  },
  mounted() {
    this.$axios.get('baidu_music_api/v1/restserver/ting?method=baidu.ting.billboard.billList&type='+ this.$route.params.musicType +'&size=12&offset=0')
    .then(res => {
      console.log(res.data.song_list)
      this.moreListData = res.data.song_list
    })
    .catch(err => {
      console.log('请求失败' + err)
    })
  },
 components: {
   PullRefresh
 },
 methods: {
   onRefresh() {
     var _this = this;
     const URL = "baidu_music_api/v1/restserver/ting?method=baidu.ting.billboard.billList&type="+ this.$route.params.musicType +"&size=12&offset="+this.offset;
     return new Promise((resolve,reject) => {
       setTimeout(() => {
         _this.$axios.get(URL)
         .then(res => {
           console.log(res.data)
           _this.offset >= res.data.billboard.billboard_songnum - 12 ? console.log("没数据了") : _this.offset += 12,
          //  _this.moreListData = _this.moreListData.concat(res.data.song_list)
          _this.moreListData = res.data.song_list 
           resolve();
         })
         .catch(err => {
           console.log('请求错误' + err)
         })
       })
     })
    }
  }
}
</script>

<style scoped>
.wrapper {
  padding-top: 13px;
  margin-bottom: 10px;
  text-align: left;
  background: #fff;
  overflow: hidden;
}
h3 {
  font-size: 22px;
  margin: 0 0 5px 17px;
}
.wrapper .info {
  width: 42%;
  float: left;
  text-align: left;
  padding-left: 17px;
  display: block;
  margin-bottom: 10px;
  position: relative;
}
.music-title {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 4px;
  line-height: 14px;
  max-height: 28px;
  margin-bottom: 2px;
}
.music-author {
  font-size: 12px;
  line-height: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #999;
}
</style>

